<template>
  <div class="item">
    <div class="item__head" @click="change">
      <div class="token">
        <img :src="token0.icon" />
        <img :src="token1.icon" />
        <span>{{ token0.symbol }}/{{ token1.symbol }}</span>
      </div>
      <div class="g-clickable icon" :class="{ fold: fold }">
        <i class="iconfont icon-arrow-up"></i>
      </div>
    </div>
    <div class="item__body" v-if="!fold">
      <div class="label">
        <span>Pooled {{ token0.symbol }}:</span>
        <div>
          <span>{{ amountA }}</span>
          <img :src="token0.icon" />
        </div>
      </div>
      <div class="label">
        <span>Pooled {{ token1.symbol }}:</span>
        <div>
          <span>{{ amountB }}</span>
          <img :src="token1.icon" />
        </div>
      </div>
      <div class="label">
        <span>You pool tokens:</span>
        <span>{{ userLiquidity }}</span>
      </div>
      <div class="label">
        <span>You pool share:</span>
        <span>{{ userLiquidityPercent }}%</span>
      </div>
    </div>
    <div class="item__foot" v-if="!fold">
      <div class="button">
        <ButtonBase label="Add" @click="add" />
      </div>
      <div class="button">
        <ButtonBase label="Remove" @click="remove" />
      </div>
    </div>
  </div>
</template>

<script>
import ButtonBase from "@/components/common/ButtonBase";
import store from "@/store";

export default {
  components: {
    ButtonBase,
  },
  props: {
    pair: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    token0() {
      return (this.pair && this.pair.token0) || {};
    },
    token1() {
      return (this.pair && this.pair.token1) || {};
    },
    amountA() {
      return (this.pair && this.pair.amountA) || 0;
    },
    amountB() {
      return (this.pair && this.pair.amountB) || 0;
    },
    totalSupply() {
      return (this.pair && this.pair.totalSupply) || 0;
    },
    userLiquidity() {
      return (this.pair && this.pair.userLiquidity) || 0;
    },
    userLiquidityPercent() {
      return Math.ceil((this.userLiquidity / this.totalSupply) * 10000) / 100;
    },
    userPairCode() {
      return this.pair ? `${this.token0.symbol}/${this.token1.symbol}` : "";
    },
  },
  data() {
    return {
      fold: false,
    };
  },
  methods: {
    change() {
      this.fold = !this.fold;
    },
    add() {
      store.commit("SET_PAIRCODE", this.userPairCode);
      store.commit("SET_LIQUIDITYPAGE", "add");
    },
    remove() {
      store.commit("SET_PAIRCODE", this.userPairCode);
      store.commit("SET_LIQUIDITYPAGE", "remove");
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  &__head {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    user-select: none;

    .token {
      display: flex;
      align-items: center;
      img {
        width: 30px;
        border-radius: 15px;
      }
      span {
        margin-left: 10px;
        font-size: 14px;
        font-family: "Roboto Bold";
        color: var(--color);
      }
    }

    .icon {
      width: 24px;
      height: 24px;

      display: flex;
      align-items: center;
      justify-content: center;

      &.fold {
        i {
          transform: rotate(180deg);
        }
      }

      i {
        font-size: 20px;
        color: var(--color);
        transition: all 0.3s ease;
      }
    }
  }

  &__body {
    margin-top: 25px;
    .label {
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      img {
        height: 24px;
        border-radius: 12px;
        margin-left: 5px;
      }

      span {
        font-size: 14px;
        font-family: "Roboto Medium";
        color: var(--color);
      }

      div {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }

  &__foot {
    margin-top: 20px;
    display: grid;
    align-items: center;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr;
  }
}
</style>
